<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商合首页</title>
		<style>
			/*初始化Css*/
			body,h1,h2,h3,h4,h5,h6,p{
				font-size:12px;
				font-family: "宋体","微软雅黑";
			}
			ul{
				list-style: none;
			}
			input{
				border:0 none;
				outline-style: none;  /*清除轮廓线*/
			}
			img{
				border:0 none;
			}
			a{
				text-decoration: none;
				display: inline-block;
			}
			/*浮动设计*/
			.left {
				float: left;
			}
			
			.right {
				float: right;
			}
			/*顶部设计*/
			.head {
				width:980px;
				height: 62px;
				margin:0 auto;
			}
			.logo{
				width: 179px;
				height: 39px;
				margin-top:20px;
			}
			.search{
				margin-top:20px;
				border:1px solid #ECECEC;
			}
			.main {
				width: 800px;
				height: 600px;
			}			
			input[type=text] {
				width: 165px;
				height: 28px;
			}
			input[type=button] {
				width:30px;
				height: 30px;
				background: url("img/search2.jpg");
			}
			/*导航的设计*/			
			.nav {
				width:980px;
				margin:0 auto;
				height: 55px;
				background: url("img/nav_bg.png");
				border-top:1px solid #E1E1E1;
			}
			/*.nav .nav-con{
				width:980px;
				margin:0 auto;
			}		*/
			.nav ul li {
				float: left;
			}
			.nav ul li a {
				height: 55px;
				display: inline-block;
				background: url("img/nav_bg-line.png") no-repeat right top;
				padding:0 46px;
				line-height: 55px;
				font-weight: 700;
				color:#000;
			}
			.nav ul li a:hover {
				color:green;
			}
			/*首页照片设计*/	
			.picture {
				width:980px;
				height：62px;
				margin:0 auto;
			}
			/*广告设计*/
			.ad{
				width:980px;			
				margin:0 auto;
				height: 29px;
				border-top:1px solid #EFEFEF;
				border-bottom:1px solid #EFEFEF;
				margin-bottom: 12px;
				background: #FBFBFB;
			}
			/*.ad-mid{
				width:980px;			
				margin:0 auto;
			}*/
			.ad-l{
				line-height: 29px;
			}
			.ad_r{
				margin-top: 6px;
			}
			
			.news-pub{
				margin-top: 13px;
				margin-left: 6px;
				color:#7AB800;
			}
			.news img{
				vertical-align: middle;
			}
			.clearfix:after{
				content:".";
				display: block;
				height: 0;
				line-height: 0;
				visibility: hidden;
				clear: both;
			}
			.clearfix{
				zoom:1;
			}
			/*左边盒子*/
			.public{
				width: 310px;
				height: 224px;
				border:1px solid #E4E4E4;
				margin-right:12px;
				position: relative;
			}
			.pro-pic{
				position: absolute;
				left:60px;
				top:50px;
			}
			.turn_l{
				position: absolute;
				left:23px;
				top:120px;
			}
			.turn_r{
				position: absolute;
				right:23px;
				top:120px;
			}
			/*中间盒子*/
			.center{
				height: 224px;
				width: 373px ;
				border:1px solid #E4E4E4;
			}
			.newslist{
				margin:10px 18px 0 23px;
			}
			.newslist li{
				height: 27px;
				border-bottom:1px dashed #DCDCDC;
				line-height: 27px;
			}
			.ftcolor{
				color:red;
				font-weight: 700;
			}
			/*右边盒子*/
			.support{
				height: 224px;
				width: 268px ;
				border:1px solid #E4E4E4;
			}
			.j-pub{
				height: 12px;
				border-left: 3px solid #7AB800;
				margin-top:10px;
				margin-left:28px;
				padding-left:5px;
			}
			.jishu p{
				margin-top:30px;
				margin-left:28px;
				line-height: 18px;
			}
			/*底部设计*/
			.foot{
				width: 980px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div class="head">
			<!--logo部分-->
			<div class="logo left">
				<img src="img/logo.jpg" alt=""/>
			</div>
			<!--搜索部分-->
			<div class="search right">
					<input type="text" value="请输入" class="left" />
					<input type="button" class="right" />
			</div>
		</div>
			<!--导航部分-->
	   <div class="nav">
			<!--<div class="nav-con">-->
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">智能手机</a></li>
					<li><a href="#">平板电脑</a></li>
					<li><a href="#">配件</a></li>
					<li><a href="#">服务支持</a></li>
					<li><a href="#">关于商合</a></li>
				</ul>
			<!--</div>-->
		</div>
		<!-- 图片部分-->
		<div class="picture">
			<img src="img/banner.jpg" alt="" />
		</div>
		<!--广告部分-->
		<div class="ad">
			
				<div class="ad-l left">
					最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网
				</div>
				<div class="ad_r right">
					<img src="img/zone.png" alt="">
					<img src="img/weibo.png" alt="">
					<img src="img/xinlang.png" alt="">
					<img src="img/renren.png" alt="">
				</div>
			
		</div>
		
			<!--新品发布部分-->
			<div class="public left">
				<div class="news-pub">
					<img src="img/o.jpg" alt="">
					<span>新品发布</span>
				</div>
				<div class="pro-pic">
					<img src="img/home_hot_01.png" alt="">
				</div>
				<div class="turn_l">
					<img src="img/left.png" alt="">
				</div>
				<div class="turn_r">
					<img src="img/right.png" alt="">
				</div>	
			</div>
			<!--新闻中心部分-->
			<div class="center left">
				<div class="news-pub">
					<img src="img/o.jpg" alt="">
					<span>新闻中心</span>
			    </div>
				<ul class="newslist">
					<li class="applogy">致歉公告</li>
					<li>首批尚合Aonet已全部售馨!</li>
					<li>【媒体报导】国产高性价比 尚合Aonet四核手机评测</li>
					<li>我司产品已经通过了国家强制性产品3C认证</li>
					<li>尚合Aone智能手机入网证已经获工信部门审批下发.</li>
					<li>我司通过ISO9001:2008国际质量管理体系认证</li>
				</ul>
			</div>
			
			<div class="support right">
				<div class="news-pub">
					<img src="img/o.jpg" alt="">
					<span>新闻中心</span>
				</div>
				<div class="j-pub">售后服务</div>
				<div class="j-pub">售后服务</div>
				<div class="j-pub">售后服务</div>
				<div class="j-pub">售后服务</div>
				
				<p>深圳市汇聚综合科技发展有限公司</p>
				<br>服务热线：100-100-100
				
			</div>
		
		
	</body>

</html>